<template>
  <div>
    <el-row>
      <el-main style="width: 1000px">
        <!--列表框-->
        <el-table
          size="small"
          current-row-key="id"
          :data="tableData"
          highlight-current-row
          v-loading="loading"
        >
          <!--注意这一行是序号，类型用的 type ! ! !-->
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="lncRNA_ID" label="LncRNA_ID" align="center"></el-table-column>
          <el-table-column prop="index" label="Index" align="center"></el-table-column>
          <el-table-column prop="directory" label="Directory" align="center"></el-table-column>
          <el-table-column prop="sequence" label="Sequence" align="center"></el-table-column>
          <el-table-column prop="score" label="Score" align="center"></el-table-column>
          <el-table-column prop="start" label="Start" align="center"></el-table-column>
          <el-table-column prop="end" label="End" align="center"></el-table-column>
          <el-table-column prop="cds_Score" label="CDS_Score" align="center"></el-table-column>
          <el-table-column prop="length" label="Length" align="center"></el-table-column>
          <!--                            <el-table-column prop="probabilityOfNegativeSamples" label="ProbabilityOfNegativeSamples"-->
          <!--                                             align="center"></el-table-column>-->
          <!--                            <el-table-column prop="probabilityOfPositiveSamples" label="ProbabilityOfPositiveSamples"-->
          <!--                                             align="center"></el-table-column>-->
        </el-table>
        <!--分页组件框-->
        <div class="pagination-container" align="right">
          <el-pagination @size-change="sizeChange" @current-change="currentChange"
                         :current-page="page" :page-size="size" :page-sizes="pageSizes"
                         layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-row>
    <el-row>
      <el-main style="width: 1000px">
        <!--列表框-->
        <el-table
          size="small"
          current-row-key="id"
          :data="tableData2"
          highlight-current-row
          v-loading="loading2"
        >
          <!--注意这一行是序号，类型用的 type ! ! !-->
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="id" label="LncRNA_ID" align="center"></el-table-column>
          <el-table-column prop="fickettScore" label="FickettScore" align="center"></el-table-column>
          <el-table-column prop="conservation" label="Conservation" align="center"></el-table-column>
          <el-table-column prop="matrix_Score" label="Matrix_Score" align="center"></el-table-column>
          <el-table-column prop="mlcds_length" label="MLCDS_length" align="center"></el-table-column>
          <el-table-column prop="mlcds_length_RNA_length" label="MLCDS_length_RNA_length" align="center"></el-table-column>
          <el-table-column prop="m6A_number" label="M6A_number" align="center"></el-table-column>
          <el-table-column prop="m6A_score" label="M6A_score" align="center"></el-table-column>
          <el-table-column prop="mlcds_sequence" label="MLCDS_sequence" align="center"></el-table-column>
          <!--                            <el-table-column prop="probabilityOfNegativeSamples" label="ProbabilityOfNegativeSamples"-->
          <!--                                             align="center"></el-table-column>-->
          <!--                            <el-table-column prop="probabilityOfPositiveSamples" label="ProbabilityOfPositiveSamples"-->
          <!--                                             align="center"></el-table-column>-->
        </el-table>
        <!--分页组件框-->
        <div class="pagination-container" align="right">
          <el-pagination @size-change="sizeChange2" @current-change="currentChange2"
                         :current-page="page2" :page-size="size2" :page-sizes="pageSizes2"
                         layout="total, sizes, prev, pager, next, jumper" :total="total2">
          </el-pagination>
        </div>
      </el-main>
    </el-row>
  </div>
</template>

<script>
import {useRoute} from "vue-router/dist/vue-router";
import {onMounted, reactive, toRefs} from "vue";
import axios from "axios";
export default {
  name: "Detail",
  setup(){
    const route = useRoute()
    const data = reactive({
      page: 1, //第几页
      size: 10, //一页多少条
      total: 0, //总条目数
      pageSizes: [10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
      page2: 1, //第几页
      size2: 10, //一页多少条
      total2: 0, //总条目数
      pageSizes2: [10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
      tableData: [], //表格要展示数据
      tableData2: [],
      allData: [], //全部数据
      allData2: [],
      fileList: [],
      fileList2: [],
      loading:true,
      loading2:true,
      taskId: null
    })
    onMounted(()=>{
      console.log(route.query.fileName)
      startTask(route.query.fileName)
    })
    // 任务开始
    function startTask(fileName) {
      axios.get("http://121.196.54.69:8001/CNIT/startTask?fileName="+fileName).then((res) => {
        console.log(res)
        data.taskId = res.data //返回taskid
        getResult(data.taskId) //获取任务运行状态runing或者success
      })
    }
    function getResult(taskID){
      axios.get("http://121.196.54.69:8001/CNIT/asyncTask",{params:{taskId:taskID}}).then((res) => {
        if (res.data == "running"){
          setTimeout(()=>{
            getResult(taskID) //任务未完成，两秒查询一次
          },2000)
        }else {
            getAll(taskID) //直到任务完成，根据taskid进行结果查询
        }
      })
    }

    //查询information结果
    function getAll(taskID) {
      axios.get("http://121.196.54.69:8001/CNIT/list_information",{params:{taskId:taskID}}).then((res) => {
        console.log("已准备好html页面，跳转到后台读取数据中。。。");
        for (const dataKey in res.data) {
          data.allData.push(res.data[dataKey])
        }
        console.log("alldata2===>",data.allData)
        getTabelData();
        data.loading = false
        getAll2(taskID)
      });
    }
    //查询feature结果
    function getAll2(taskID) {
      axios.get("http://121.196.54.69:8001/CNIT/list_feature",{params:{taskId:taskID}}).then((res) => {
        console.log("已准备好html页面，跳转到后台读取数据中。。。");
        for (const dataKey in res.data) {
          data.allData2.push(res.data[dataKey])
        }
        console.log("alldata2===>",data.allData2)
        getTabelData2();
        data.loading2 = false
      });
    }

    //获取表格数据，自行分页(slice)
    function getTabelData() {
      //allData为全部数据
      data.tableData = data.allData.slice(
        (data.page - 1) * data.size,
        data.page * data.size
      );
      data.total = data.allData.length
    }
    function getTabelData2() {
      //allData为全部数据
      data.tableData2 = data.allData2.slice(
        (data.page2 - 1) * data.size2,
        data.page2 * data.size2
      );
      data.total2 = data.allData2.length
    }
    //page改变时的回调函数，参数为当前页码
    function currentChange(val){
      // console.log("翻页，当前为第几页", val);
      data.page = val;
      getTabelData();
    }
    function currentChange2(val) {
      // console.log("翻页，当前为第几页", val);
      data.page2 = val;
      getTabelData2();
    }
    //size改变时回调的函数，参数为当前的size
    function sizeChange(val) {
      // console.log("改变每页多少条，当前一页多少条数据", val);
      data.size = val;
      data.page = 1;
      getTabelData();
    }
    function sizeChange2(val) {
      // console.log("改变每页多少条，当前一页多少条数据", val);
      data.size2 = val;
      data.page2 = 1;
      getTabelData2();
    }
    return {
      ...toRefs(data),
      sizeChange,
      sizeChange2,
      currentChange,
      currentChange2,
    }
  }
}
</script>

<style scoped>

</style>
